<script setup>
import { ref } from 'vue';
import { getSMS, telLogin } from "../api/index.js"
import { showSuccessToast, showFailToast } from 'vant';
import 'vant/es/toast/style';
import { useRouter } from "vue-router";
const router = useRouter();
import { useUserMsg } from "../stores/user"
const userMsg = useUserMsg();

// 短信验证码倒计时
const smsText = ref("发送短信验证码");
// 发送按钮的禁用状态
const isSend = ref(false);
// 倒计时时间
let time = 10;
// 计时器
let t;
// 发送短信验证码功能
const sendSms = ()=>{
  // 倒计时部分
  smsText.value = time + "s后重新发送";
  isSend.value = true;
  t = setInterval(()=>{
    time--;
    smsText.value = time + "s后重新发送";
    if(time===0){
      smsText.value = "发送短信验证码";
      clearInterval(t);
      isSend.value = false;
      time = 10;
    }
  },1000)
  // 发起发送短信请求部分
  getSMS({
    mobile: mobile.value
  }).then(res=>{
    // 请求成功后的处理
    if(res.data.meta.state === 201){
      showSuccessToast('验证码发送成功，请查看手机');
    }else if(res.data.meta.state === 200){
      showSuccessToast(res.data.meta.msg);
    }else{
      showFailToast(res.data.meta.msg);
    }
  })
}

// 手机号登录
const mobile = ref('17600901915');
const code = ref('');
const telSubmitFn = (values) => {
  telLogin(values).then(res=>{
    if(res.data.meta.state === 200){
      showSuccessToast({
        message:"登录成功",
        onClose:()=>{
          
          // 将用户状态存储到状态管理器
          userMsg.changeMsg( res.data.data );
          // 将用户状态存储到本地存储
          localStorage.setItem("userMsg", JSON.stringify(res.data.data));

          router.push("/");
        }
      });
    }else{
      showFailToast(res.data.meta.msg);
    }
  })
};


// 身份证号登录
const idcard = ref('');
const pwd = ref('');
const idSubmitFn = (values) => {
  console.log('idLogin', values);
};

</script>

<template>
  <div class="loginBox">
    <h1>锋域<small> · 千锋开放社区</small></h1>
    <van-tabs :active="0">
      <van-tab title="手机号登录">
        <van-form @submit="telSubmitFn">
          <van-cell-group inset>
            <van-field
              v-model="mobile"
              clearable
              center
              name="mobile"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
              v-model="code"
              center
              clearable
              name="code"
              label="短信验证码"
              placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            >
              <template #button>
                <van-button size="small" type="primary" @click="sendSms" :disabled="isSend">{{ smsText }}</van-button>
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              手机号登录
            </van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="身份证号登陆">
        <van-form @submit="idSubmitFn">
          <van-cell-group inset>
            <van-field
              v-model="idcard"
              name="idcard"
              label="身份证号"
              placeholder="身份证号"
              :rules="[{ required: true, message: '请填写身份证号' }]"
            />
            <van-field
              v-model="pwd"
              type="password"
              name="pwd"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              身份证登陆
            </van-button>
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
    
  </div>
</template>

<style>
.loginBox{
  padding: 50px 0;
  background: #fff;
  margin-top: 50px;
}
.loginBox h1{
  text-align: center;
}
</style>

